<template>
  <div class="app-container">
    <div class="information ">
      <div>负责班级</div>
    </div>
    <div v-for="i in resClass.length" :key="i" style="margin-top: 20px">
      <el-row :gutter="24">
        <el-col v-if="resClass[2*(i-1)]" :xs="12" :sm="8">
          <el-card shadow="always" style="text-align: center">
            {{ resClass[2 * (i - 1)].value }}
          </el-card>
        </el-col>
        <el-col v-if="resClass[2*(i-1)+1]" :xs="12" :sm="8">
          <el-card shadow="always" style="text-align: center">
            {{ resClass[2 * (i - 1) + 1].value }}
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="information ">
      <div>现有活动</div>
    </div>
    <el-table
      :data="activityData"
      style="width: 100%; margin-top: 20px"
      highlight-current-row
    >
      <el-table-column
        align="center"
        type="index"
        label="序号"
        width="60"
      />
      <el-table-column
        prop="name"
        label="活动名称"
        min-width="30"
      />
      <el-table-column
        prop="startTime"
        label="开始时间"
        min-width="20"
      />
      <el-table-column
        prop="endTime"
        label="结束时间"
        min-width="20"
      />
      <el-table-column
        align="center"
        fixed="right"
        label="查看奖项"
        width="200px"
        style="text-align: center"
      >
        <!-- 查看活动奖项-->
        <template slot-scope="scope" style="text-align: center">
          <el-button type="primary" icon="el-icon-search" @click="searchPrize(scope.row)">搜索</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="活动对应奖项查看"
      :visible.sync="prizeDialogVisible"
      width="70%"
    >
      <el-table :data="pcData" width="100%">
        <el-table-column property="pcName" label="奖项名称" min-width="20%" />
        <el-table-column property="pcSignUpStartTime" label="开始时间" min-width="10%" />
        <el-table-column property="pcSignUpEndTime" label="结束时间" min-width="10%" />
        <el-table-column
          align="left"
          label="选取班级"
          min-width="15%"
          style="text-align: center"
        >
          <template slot-scope="scope" style="text-align: center">
            <el-select
              :key="scope.$index"
              v-model="scope.row.classSelected"
              placeholder="请选择"
              style="min-width: 10%"
              @change="test(scope)"
            >
              <el-option
                v-for="item in resClass"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="转至民主测评" min-width="10%" align="center">
          <!--          <i class="el-icon-thumb" @click="jump" style="font-size: 20px; color: #d7690f; width: 20px"></i>-->
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-thumb" style="font-size: 16px; color: #d7690f" @click="jump(scope)">
              JUMP
            </el-button>
          </template>>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Info',
  data() {
    return {
      prizeDialogVisible: false,
      resClass: [{
        value: '本-2018级电气工程及其自动化本科1班',
        label: '本-2018级电气工程及其自动化本科1班'
      }, {
        value: '2018-class-2',
        label: '2018-class-2'
      }],
      activityData: [{ name: '活动', startTime: '2021-11-21', endTime: '2021-11-89' }],
      pcData: []
    }
  },
  mounted() {
    // this.fetchResClass()
    this.fetchActivity()
  },
  methods: {
    test(val) {
      // console.log(val)
      this.pcData.push({ classSelected: '' })
      // console.log(this.pcData)
      this.pcData = this.pcData.slice(0, this.pcData.length - 1)
      // console.log(this.pcData)
      // this.$set(this.pcData, val.row.classSelected, val.row.classSelected)
      // this.$forceUpdate()
    },
    // 获取班级信息
    fetchResClass(params = {}) {
      this.$get('price/price/teacherGetAllClasses', {
        ...params
      }).then((r) => {
        const data = r.data.data
        // 获取到正确的token之后，需要重新将data写入resClass
        // this.resClass = data
        for (let i = 0; i < data.length; i++) {
          this.resClass.push(
            {
              value: data[i],
              label: data[i]
            }
          )
        }
        console.log(this.resClass)
      })
    },
    // 获取进行中的活动
    fetchActivity(params = {}) {
      this.$get('price/price/teacherGetAllActivities', {
        ...params
      }).then((r) => {
        const data = r.data.data
        if (data.length !== 0) {
          for (let i = 0; i < data.length; i++) {
            this.activityData.push(
              {
                name: data[i].activityName,
                startTime: data[i].activityStartTime.substring(0, 8),
                endTime: data[i].activityEndTime.substring(0, 8)
              })
          }
        }
      })
    },
    // 获取活动对应的奖项
    searchPrize(row, params = {}) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.pcData = []
      params.activity = row.name
      this.$get('price/price/teacherGetAllPricesByActivity', {
        ...params
      }).then((r) => {
        this.pcData = r.data.data
        for (let i = 0; i < this.pcData.length; i++) {
          this.pcData[i].pcSignUpStartTime = this.pcData[i].pcSignUpStartTime.substr(0, 10)
          this.pcData[i].pcSignUpEndTime = this.pcData[i].pcSignUpEndTime.substr(0, 10)
          this.pcData[i].classSelected = ''
        }
      })
      setTimeout(() => {
        this.prizeDialogVisible = true
      }, 800)
      loading.close()
      // setTimeout(() => {
      //   loading.close()
      // }, 3000)
    },
    // 奖项-班级选取结束，页面跳转
    // 跳转到民主测评分数录入页面（路由带参数（prizename，classname）跳转功能）
    jump(val) {
      console.log(val)
      this.prizeDialogVisible = false
      this.$router.push({ path: '/democratic_appraisal/score', query: { className: val.row.classSelected, priceName: val.row.pcName }})
      // html 取参  $route.query
      // script 取参  this.$route.query
    }
  }
}
</script>

<style scoped>
.information {
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  font-weight: bolder;
  color: rgba(61, 59, 56, 0.69);
  background-color: white;
  display: inline-block;
}
</style>
